<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/26
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--刷新按钮--%>
    <el-button type="success" @click="refresh"><i class="el-icon-refresh"></i>&nbsp;&nbsp;刷新</el-button>
    <%--用表格显示--%>
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="cid"
                    label="出库编码">
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    label="出库人">
            </el-table-column>
            <el-table-column
                    prop="outtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    width="180"
                    label="出库时间">
            </el-table-column>
            <el-table-column
                    prop="outmethod"
                    label="出库方式">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.outmethod===1" type="success">零售出库</el-tag>
                    <el-tag v-else-if="scope.row.outmethod===2">批量出库</el-tag>
                    <el-tag v-else-if="scope.row.outmethod===3" type="info">平调出库</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="examstate"
                    width="100"
                    label="出库状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.examstate===1" type="warning">待审核</el-tag>
                    </span>
                    <el-tag v-else-if="scope.row.examstate===2" type="success">通过</el-tag>
                    </span>
                    <el-tag v-else-if="scope.row.examstate===3" type="danger">驳回</el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    label="详情">
                <template slot-scope="scope">
                    <el-button size="medium" type="primary" round @click="audit(scope.row.cid)"><i
                            class="el-icon-info"></i>&nbsp;&nbsp;详细信息
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="220"
                    label="操作">
                <template slot-scope="scope">
                    <%--如果出库状态为1则显示通过按钮和驳回按钮--%>
                    <template v-if="scope.row.examstate===1">
                        <el-button size="medium" type="success" @click="pass(scope.row.cid)" round><i
                                class="el-icon-success"></i>&nbsp;&nbsp;通过
                        </el-button>
                        <el-button size="medium" type="danger" @click="reject(scope.row.cid)" round><i
                                class="el-icon-error"></i>&nbsp;&nbsp;驳回
                        </el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--分页功能--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--详情信息的表格--%>
    <el-dialog
            title="出库详情"
            :visible.sync="dialogVisible"
            width="70%"
            height="400"
            :before-close="handleClose">
        <template>
            <el-table
                    :data="tableAudit"
                    border
                    height="300px">
                style="width: 100%">
                <el-table-column
                        prop="xid"
                        label="出库详情ID">
                </el-table-column>
                <el-table-column
                        prop="goods.goodsname"
                        label="商品名">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="出库数量">
                </el-table-column>
                <el-table-column
                        prop="goods.sprice"
                        label="售价">
                </el-table-column>
                <el-table-column
                        prop="total"
                        label="总价">
                </el-table-column>
            </el-table>
        </template>
        <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-sizes="[3,5,7,10]"
                :page-size="pageSize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>
    </el-dialog>
    <%--点击驳回时弹出的对话框--%>
    <el-dialog
            title="驳回理由"
            :visible.sync="dialogVisiblRreject"
            width="30%"
            :before-close="handleClose">
        <el-form ref="formReject" :model="formReject" label-width="80px">
            <el-form-item>
                <el-input v-model="formReject.remarks"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblRreject = false">取 消</el-button>
    <el-button type="primary" @click="okReject">确 定</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            tableData: undefined,//表格数据
            total: 0,//数据总数
            currentPage: 1,//当前页码
            pageSize: 5,//每页显示条数
            dialogVisible: false,//控制详情表格显示

            tableAudit: undefined,//详情表格数据
            total2: 0,//详情数据总数
            currentPage2: 1,//详情页码
            pageSize2: 3,//详情每页显示条数
            cid: undefined,//出库编号分页参数

            dialogVisiblRreject: false,//控制驳回对话框显示
            formReject: {}, //驳回理由的表单对象
            cid02: undefined,//出库编号

            userbranchid: undefined,//当前登录者的分店名称
            Exbranchid: undefined,//要进行审核的分店名称
        },
        created() {
            this.getAllOutLibraryEx()
            this.getUserBranchid()
        },
        methods: {
            //查询当前登录者的分店名称
            getUserBranchid() {
                axios.get("/branch/getUserBranchid").then(res => {
                    if (res.data.code === 200) {
                        this.userbranchid = res.data.data;
                    }
                })
            },
            //查询所有审核表信息
            getAllOutLibraryEx() {
                axios.get("/outLibraryEx/getAllOutLibraryEx?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    this.tableData = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            // 改变每页显示的条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.getAllOutLibraryEx();
            },
            // 改变页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getAllOutLibraryEx();
            },
            //点击刷新按钮 重新加载数据并且返回到第一页
            refresh() {
                this.currentPage = 1;
                this.getAllOutLibraryEx();
                this.$message({
                    message: '刷新成功',
                    type: 'success'
                });
            },
            //对话框的关闭
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //点击详细信息按钮
            audit(cid) {
                this.dialogVisible = true;
                this.cid = cid;
                axios.get("/outLibraryEx/getOutGoodsByCid?cid=" + this.cid + "&currentPage=" + this.currentPage2 + "&pageSize=" + this.pageSize2).then(resp => {
                    if (resp.data.code === 200) {
                        this.tableAudit = resp.data.data.list;
                        this.total2 = resp.data.data.total;
                    }
                })
            },
            // 改变每页显示的条数
            handleSizeChange2(val) {
                this.pageSize2 = val;
                this.audit(this.cid)
            },
            // 改变页码
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                this.audit(this.cid)
            },
            // 点击通过按钮
            pass(cid) {
                //求得要审核的分店名称
                axios.get("/outLibraryEx/getBranchNameByCid?cid=" + cid).then(resp => {
                    if (resp.data.code === 200) {
                        this.Exbranchid = resp.data.data;
                    }
                    //判断要审核的分店名称与当前登录者的分店名称是否一致
                    if (this.userbranchid != this.Exbranchid) {
                        this.$message({
                            message: '当前登录者与要审核的分店名称不一致，无法审核',
                            type: 'warning'
                        });
                        return;
                    }
                    //通过
                    axios.put("/outLibraryEx/pass?cid=" + cid).then(resp => {
                        if (resp.data.code === 200) {
                            this.$message({
                                message: '通过成功',
                                type: 'success'
                            });
                            this.getAllOutLibraryEx();
                        }
                    })
                })
            },
            // 点击驳回按钮
            reject(cid) {
                //求得要审核的分店名称
                axios.get("/outLibraryEx/getBranchNameByCid?cid=" + cid).then(resp => {
                    if (resp.data.code === 200) {
                        this.Exbranchid = resp.data.data;
                    }
                    //判断要审核的分店名称与当前登录者的分店名称是否一致
                    if (this.userbranchid != this.Exbranchid) {
                        this.$message({
                            message: '当前登录者与要审核的分店名称不一致，无法审核',
                            type: 'warning'
                        });
                        return;
                    }
                    this.cid02 = cid;
                    this.dialogVisiblRreject = true;
                })
            },
            // 确定驳回按钮
            okReject() {
                this.formReject.cid = this.cid02;
                axios.post("/outLibraryEx/reject", this.formReject).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            message: '驳回成功',
                            type: 'success'
                        });
                        this.dialogVisiblRreject = false;
                        this.getAllOutLibraryEx();
                    }
                })
            },
        }
    })
</script>
</html>
